import React, { useEffect, useRef, useState } from 'react'
import { loadScript } from '@/utils/loadScript'
import { CDN_ECHARTS } from '@/lib/utils'
import { RadarData } from '@/types'

interface RadarProps {
  data: RadarData
  height?: string
}

/** 把任意数值归一化到 0–100 */
const normalize = (val: number, sourceMax: number, sourceMin = 0): number => {
  // 处理无效或零宽度的源范围。
  // 如果 sourceMax 小于或等于 sourceMin，则无法进行有效的归一化计算，
  // 此时返回 0 是一种安全且合理的默认行为，避免除以零或负数范围导致的意外结果。
  if (sourceMax <= sourceMin) {
    // 可以在这里添加一个警告，但通常保持函数纯粹不产生副作用。
    // console.warn("normalize: sourceMax 应该大于 sourceMin。返回 0。");
    return 0;
  }

  // 核心归一化计算：
  // 1. (val - sourceMin): 将 val 转换为相对于 sourceMin 的偏移量，使 sourceMin 变为 0。
  // 2. / (sourceMax - sourceMin): 将偏移量缩放到 0-1 的范围。
  // 3. * 100: 将 0-1 范围的值进一步缩放到 0-100 的目标范围。
  const rawNormalized = ((val - sourceMin) / (sourceMax - sourceMin)) * 100;

  // 钳制结果：确保最终输出值严格在 0 到 100 之间。
  // 这会处理 val 小于 sourceMin (结果会是负数) 或 val 大于 sourceMax (结果会大于 100) 的情况。
  return Math.min(100, Math.max(0, rawNormalized));
};

/** 各项指标计算与标准化 */
function evaluatePerformance(d: RadarData) {
  const {
    kills = 0,
    deaths = 0,
    receive = 0,
    damage = 0,
    wash_count = 0,
    wash_receive =0,
    // _heal_receive = 0,
    heal_count = 0,
    buff_damage = 0,
    duration = 15
  } = d

    // const kd = Math.max(deaths === 0 ? kills : kills / deaths, 1)
    //   const outputToReceive = receive === 0 ? damage : receive / damage

    // 假设 'normalize' 函数将一个值映射到 0-30 的分数。
    // 例如：normalize(value, target) => Math.min(30, (value / target) * 30)

    // ---------------------------------------------------------------
    //  请确保以下原始数据变量在你调用此代码时是可用的。
    //  如果某些变量不存在，请根据实际情况调整或提供默认值。
    // ---------------------------------------------------------------
    // const duration = <游戏持续时间，单位：分钟>; // 示例: 25.5
    // const game_assists = <传统意义上的助攻数，例如KDA助攻>; // 示例: 8
    // const heal_count = <总治疗量>; // 示例: 12000
    // const buff_damage = <通过增益、控制或特定技能造成的贡献伤害/效果点数>; // 示例: 150
    // const wash_count = <特定“清洗”动作的执行次数>; // 示例: 7
    // const wash_receive = <特定“清洗”动作的目标数或尝试次数>; // 示例: 5


    // ====== 雷达规则计算 ======

    // timeFactor 保持不变，用于对整体分数进行调整
    const timeFactor = Math.max(0.5, Math.min(1, 30 / (duration || 1)));

    // --- 完善 assist_cnt ---
    // `assist_cnt` 的新定义将是所有辅助行为的综合得分。
    // 我们需要根据“卓越”条件来分配权重：
    // 1. `game_assists > 5` 视为卓越。
    // 2. `heal_count > 100` 视为卓越。
    // 3. `assist_score` 每20分钟大于10为卓越。

    // 基于上述条件，我们可以推断：
    // 如果 5 次助攻和 100 点治疗都视为卓越，那么 1 次助攻大致相当于 20 点治疗。
    // 所以，将 heal_count 除以 20，使其贡献值与 game_assists 相当。
    const HEAL_POINTS_PER_ASSIST = 20;

    // `buff_damage` 在原始 assist_score 中乘以 2，保持高权重。
    // `wash_count / wash_receive` 原本是一个比率。
    // 如果 wash_count 本身可以视为一种助攻，可以将其直接加入。
    // 如果 `wash_efficiency_ratio` 是一个独立的加分项，可以乘以一个点数转换系数。
    // 假设 `wash_count` 本身是计数，我们将其作为一种辅助行为计入。

    // 计算 '清洗' 效率比率 (如果 wash_receive 有效，且这个比率有意义)
    const wash_efficiency_ratio = wash_receive > 0 ? (wash_count / wash_receive) : wash_count;
    // 为洗涤效率比率设置一个点数转换，例如，如果效率达到 2.0，给 5 点。
    const WASH_EFFICIENCY_POINT_MULTIPLIER = 2.5; // (2.0 效率 * 2.5 = 5 点)

    // 重新定义 `assist_cnt` 为“总有效辅助点数”，用于后续的 normalize
    // 这个 `assist_cnt` 现在是一个综合分数，而不是单一比率。
    const assist_cnt_effective_points =
        (wash_efficiency_ratio || 0) +                         // 传统助攻数直接计入
        ((heal_count || 0) / HEAL_POINTS_PER_ASSIST) + // 治疗量转换为助攻点数
        ((buff_damage || 0) * 2) +                     // 增益/控制伤害点数，保持高权重
        ((wash_count || 0) / 5) +                  // 如果 wash_count 是计数，可视为每5次清洗贡献1点
        ((wash_receive > 0) ? (wash_efficiency_ratio * WASH_EFFICIENCY_POINT_MULTIPLIER) : 0); // 洗涤效率比率额外加分

    // === 各项评分 ===

    // kill_score 保持不变
    const kill_score = normalize(kills, 30) * timeFactor;

    // death_score 保持不变
    const death_score = normalize(deaths === 0 ? 10 : deaths, 15) * timeFactor;

    // assist_score的计算逻辑，如果 值每20分钟大于10为卓越。
    // 首先，计算每分钟的辅助点数
    const assist_points_per_minute = assist_cnt_effective_points / Math.max(duration, 1);
    // 然后，将其转换为“每20分钟”的值，作为 normalize 的输入
    const assist_score_input_per_20_min = assist_points_per_minute * 20;
    // 如果“每20分钟大于10”为卓越，那么我们将 10 设为 normalize 的目标值，
    // 这样当达到 10 时，normalize 函数将返回满分（或接近满分）。
    const assist_score = normalize(assist_score_input_per_20_min, 10) * timeFactor;

    // survive_score 保持不变
    const survive_score = normalize(receive, 100_000_000) * timeFactor;

    // damage_score 保持不变
    const damage_score = normalize(damage, 200_000_000) * timeFactor;

    // control_score 保持不变 (如果 buff_damage 在这里是控制伤害，需要考虑它在 assist_score 中也贡献)
    // 如果 buff_damage 是通用辅助/控制数值，它在 assist_score 和 control_score 中都出现是合理的。
    const control_score = normalize(buff_damage, 200) * timeFactor;

    // 注意: 如果 `wash_count` 和 `wash_receive` 对于你的游戏机制非常独特，
    // 并且它们本身应该像 `kills` 或 `deaths` 一样有单独的雷达项，
    // 那么应该考虑为它们创建独立的 `wash_score` 或 `efficiency_score`。
    // 在这个完善中，我将 `wash_count` 和 `wash_efficiency_ratio` 的贡献整合到了 `assist_score` 中。

  return {
    kill_score,
    death_score,
    assist_score,
    survive_score,
    damage_score,
    control_score
  }
}

//   输出增益人次: ${data.buff_damage}<br/>
//   承受减益人次: ${data.buff_receive}<br/>
export default function Radar({ data, height = '480px' }: RadarProps) {
  const chartRef = useRef<HTMLDivElement>(null)
  const chartInstance = useRef<any>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    let mounted = true
    if (!data) return

    const scores = evaluatePerformance(data)

    const renderChart = () => {
      if (!(window as any).echarts || !chartRef.current) return

      if (chartInstance.current) {
        chartInstance.current.dispose()
      }

      const echarts = (window as any).echarts
      const chart = echarts.init(chartRef.current)
      chartInstance.current = chart

      const indicators = [
        { name: '击杀', max: 100 },
        { name: '死亡/KD', max: 100 },
        { name: '辅助', max: 100 },
        { name: '承伤比', max: 100 },
        { name: '输出', max: 100 },
        { name: '辅助控制', max: 100 }
      ]

      const values = [
        scores.kill_score,
        scores.death_score,
        scores.assist_score,
        scores.survive_score,
        scores.damage_score,
        scores.control_score
      ]

      const option = {
        title: {
          text: `${data.author} - 战斗表现`,
          left: 'center',
          textStyle: { fontSize: 16 }
        },
        tooltip: {
          trigger: 'item',
          formatter: () => `
            <div style="line-height:1.5">
              <strong>${data.author}</strong><br/>
              击杀: ${data.kills}<br/>
              死亡: ${data.deaths}<br/>
              输出: ${data.damage.toLocaleString()}<br/>
              承伤: ${data.receive.toLocaleString()}<br/>
              治疗: ${data.heal_count}<br/>
              时长: ${data.duration}分钟
            </div>
          `
        },
        radar: {
          indicator: indicators,
          radius: '60%',
          splitNumber: 5,
          shape: 'polygon',
          axisName: { color: '#444' },
          splitLine: { lineStyle: { color: '#ddd' } },
          splitArea: { areaStyle: { color: ['#fafafa', '#fff'] } }
        },
        series: [
          {
            type: 'radar',
            data: [
              {
                value: values,
                name: data.author,
                symbol: 'circle',
                symbolSize: 6,
                lineStyle: { width: 2, color: '#113ec7ff' },
                itemStyle: { color: '#194ce4ff' },
                areaStyle: { opacity: 0.3 }
              }
            ]
          }
        ]
      }

      chart.setOption(option)
      chart.resize()
      setLoading(false)
    }

    loadScript(CDN_ECHARTS)
      .then(() => {
        if (mounted) renderChart()
      })
      .catch(() => {
        setLoading(false)
        if (chartRef.current)
          chartRef.current.innerHTML = `<div style="color:red;text-align:center;padding:1em">ECharts 加载失败</div>`
      })

    const onResize = () => {
      if (chartInstance.current) chartInstance.current.resize()
    }
    window.addEventListener('resize', onResize)

    return () => {
      mounted = false
      window.removeEventListener('resize', onResize)
      chartInstance.current?.dispose()
      chartInstance.current = null
    }
  }, [data])

  return (
    <div style={{ position: 'relative', minHeight: height, width: '100%' }}>
      {loading && (
        <div
          style={{
            position: 'absolute',
            inset: 0,
            background: 'rgba(255,255,255,0.6)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
          }}
        >
          加载中...
        </div>
      )}
      <div
        ref={chartRef}
        style={{ minHeight: height, width: '100%', background: '#fff' }}
      />
    </div>
  )
}
